<template>
  <div>

    <!-- 评论列表 -->
    <div class="cmt-list" :class="{'art-cmt-container-1':isShowCmtInput,'art-cmt-container-2': !isShowCmtInput}">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多评论了,请发表评论" :immediate-check='false'
        @load="onLoad">
        <!-- 评论的 Item 项 -->
        <div class="cmt-item" v-for="item in commentsList" :key='item.com_id'>
          <!-- 头部区域 -->
          <div class="cmt-header">
            <!-- 头部左侧 -->
            <div class="cmt-header-left">
              <img :src="item.aut_photo" alt="" class="avatar">
              <span class="uname">{{item.aut_name}}</span>
            </div>
            <!-- 头部右侧 -->
            <div class="cmt-header-right">
              <van-icon name="like" size="16" color="red" v-if="item.is_liking === true" @click="likeFn(item)" />
              <van-icon name="like-o" size="16" color="gray" v-else @click="likeFn(item)" />
            </div>
          </div>
          <!-- 主体区域 -->
          <div class="cmt-body">
            {{item.content}}
          </div>
          <!-- 尾部区域 -->
          <div class="cmt-footer">{{timeAgo(item.pubdate)}}</div>
        </div>
      </van-list>

    </div>

    <!-- 底部添加评论区域 - 1 -->
    <div class="add-cmt-box van-hairline--top" v-if="isShowCmtInput === true">
      <van-icon name="arrow-left" size="0.48rem" @click="$router.back()" />
      <div class="ipt-cmt-div" @click="toggleShowFn">发表评论</div>
      <div class="icon-box">
        <van-badge :content="totalCount === 0 ? '' : totalCount" max="99">
          <van-icon name="comment-o" size="0.53333334rem" @click="commentClickFn" />
        </van-badge>
        <van-icon name="star-o" size="0.53333334rem" />
        <van-icon name="share-o" size="0.53333334rem" @click="showShare = true" />
      </div>
    </div>

    <!-- 底部添加评论区域 - 2 -->
    <div class="cmt-box van-hairline--top" v-else>
      <textarea placeholder="友善评论、理性发言、阳光心灵" ref="textarea" @blur="blurFn" v-model.trim="comText"></textarea>
      <van-button type="default" :disabled="comText.length===0" @click="sendFn">发布</van-button>
    </div>

    <!-- 分享显示 -->
    <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
  </div>
</template>

<script>
import {
  commentsListAPI,
  commentLikingAPI,
  commentDisLikingAPI,
  sendCommentAPI
} from '@/api'
import {
  timeAgo
} from '@/utils/date'
import {
  Toast
} from 'vant'
export default {
  data () {
    return {
      commentsList: [], // 评论数据
      isShowCmtInput: true, // 控制底部评论框的显示
      totalCount: 0, // 评论的总数量
      comText: '', // 评论框的内容
      loading: false, // 控制加载状态
      finished: false,
      lastId: null, // 下一次请求评论的offset值
      showShare: false, // 控制分享页面的显示与隐藏
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ]
    }
  },
  methods: {
    timeAgo,
    // 获取评论数据
    async getCommentsList () {
      const result = await commentsListAPI({
        id: this.$route.query.art_id,
        offset: this.lastId
      })
      this.commentsList = [...this.commentsList, ...result.data.data.results]
      this.totalCount = result.data.data.total_count
      this.lastId = result.data.data.last_id
    },
    // 对评论喜欢或者取消喜欢
    async likeFn (item) {
      if (item.is_liking) {
        // 取消喜欢
        item.is_liking = false
        await commentDisLikingAPI(item.com_id)
      } else {
        // 切换成喜欢
        item.is_liking = true
        await commentLikingAPI(item.com_id)
      }
    },
    // 显示评论输入框
    toggleShowFn () {
      this.isShowCmtInput = false
      // 自动聚焦
      setTimeout(() => {
        this.$refs.textarea.focus()
      }, 0)
    },
    // 点击评论按钮  实现滚动效果
    commentClickFn () {
      // 真实DOM都在document(所以不再一个vue文件内), 也是可以获取的
      document.querySelector('.like-box').scrollIntoView({
        behavior: 'smooth'
      })
    },
    // 输入框失焦事件
    blurFn () {
      setTimeout(() => {
        this.isShowCmtInput = true
      }, 11)
    },
    // 发布按钮的点击事件
    async sendFn () {
      const result = await sendCommentAPI({
        artId: this.$route.query.art_id,
        content: this.comText
      })
      if (result.status === 201) {
        this.totalCount++
        Toast('评论成功')
        this.commentsList.unshift(result.data.data.new_obj)
        this.commentClickFn()
      }
      this.comText = ''
    },
    // 下拉加载更多
    onLoad () {
      if (this.commentsList.length > 0) {
        this.getCommentsList()
        this.loading = false
        if (this.lastId) {
          this.finished = true
        }
      } else {
        this.loading = false
      }
    },
    // 分享的功能
    onSelect (option) {
      Toast(option.name)
      this.showShare = false
    }
  },
  created () {
    this.getCommentsList()
  }
}

</script>

<style scoped lang="less">
  .cmt-list {
    padding: 10px;

    .cmt-item {
      padding: 15px 0;

      +.cmt-item {
        border-top: 1px solid #f8f8f8;
      }

      .cmt-header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .cmt-header-left {
          display: flex;
          align-items: center;

          .avatar {
            width: 40px;
            height: 40px;
            background-color: #f8f8f8;
            border-radius: 50%;
            margin-right: 15px;
          }

          .uname {
            font-size: 12px;
          }
        }
      }

      .cmt-body {
        font-size: 14px;
        line-height: 28px;
        text-indent: 2em;
        margin-top: 6px;
        word-break: break-all;
      }

      .cmt-footer {
        font-size: 12px;
        color: gray;
        margin-top: 10px;
      }
    }
  }

  /*美化 - 文章详情 - 底部的评论页面 */
  // 外层容器
  /deep/ .art-cmt-container-1 {
    padding-bottom: 46px;
  }

  /deep/ .art-cmt-container-2 {
    padding-bottom: 80px;
  }

  // 发布评论的盒子 - 1
  .add-cmt-box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 46px;
    line-height: 46px;
    padding-left: 10px;

    .ipt-cmt-div {
      flex: 1;
      border: 1px solid #efefef;
      border-radius: 15px;
      height: 30px;
      font-size: 12px;
      line-height: 30px;
      padding-left: 15px;
      margin-left: 10px;
      background-color: #f8f8f8;
    }

    .icon-box {
      width: 40%;
      display: flex;
      justify-content: space-evenly;
      line-height: 0;
    }
  }

  .child {
    width: 20px;
    height: 20px;
    background: #f2f3f5;
  }

  // 发布评论的盒子 - 2
  .cmt-box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    padding-left: 10px;
    box-sizing: border-box;
    background-color: white;

    textarea {
      flex: 1;
      height: 66%;
      border: 1px solid #efefef;
      background-color: #f8f8f8;
      resize: none;
      border-radius: 6px;
      padding: 5px;
    }

    .van-button {
      height: 100%;
      border: none;
    }
  }

</style>
